<template>
    <div>
        <el-dialog :visible.sync="value" style="background: rgba(64,158,255, 0.5)" center :show-close="false" top="15vh">
            <template slot="title">{{data.id ? '修改权限':'新增权限'}}</template>
            <el-form ref="form" :model="data" label-width="80px" label-position="right" :rules="rules">
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="data.name" minlength="2" maxlength="20" placeholder="请输入权限名称"></el-input>
                </el-form-item>
                <el-form-item label="权限编码" prop="code">
                    <el-input v-model="data.code" minlength="2" maxlength="30" placeholder="请输入权限编码"></el-input>
                </el-form-item>
                <el-form-item label="父级菜单" prop="pid">
                    <el-alert title="如果不选择父级菜单,则表示该表单提交的将是父级菜单" style="height: 30px;margin-bottom: 10px;" type="info" :closable="false" show-icon></el-alert>
                    <Scroll height="200">
                        <el-tree ref="tree"
                                 :default-expanded-keys="tree.expandedKeys"
                                 :current-node-key="tree.currentNodeKey"
                                 :data="treeData"
                                 node-key="id"
                                 highlight-current
                                 icon-class="el-icon-watermelon"
                                 :props="defaultProps"
                                 @node-click="handleNodeClick"></el-tree>
                    </Scroll>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button v-loading.fullscreen.lock="fullscreenLoading" icon="el-icon-plus" type="primary" plain @click="handleSubmit">提交</el-button>
            </template>

        </el-dialog>
    </div>
</template>

<script>
    import { getPermissionList,saveOrUpdate } from '@/api/system/access/permission'

    export default {
        name: "system-permission-child",
        data(){
            return {
                value:false,
                fullscreenLoading:false,
                data:{},
                treeData:[],
                tree:{
                    expandedKeys:[],
                    currentNodeKey:''
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        methods:{
            getPermissionList(){
                getPermissionList({}).then(res=>{
                    this.treeData = res.data.data;
                });
            },
            handleNodeClick(data,node,target){
                this.data.pid = data.id;
                if(data.pid == '0' && data.classification == '1'){
                    this.data.type = data.type;
                    this.data.classification = '2';
                }else if(data.pid != '0' && data.classification == '2'){
                    this.data.type = data.type;
                    this.data.classification = '3';
                }else{
                    this.data.type = data.type + 1;
                    this.data.classification = (parseInt(data.classification) + 1) + '';
                }
            },
            handleSubmit(){
                if(!this.data.pid){ //说明用户没有选择
                    this.data.pid = "0";  //设置pid
                    this.data.type = 1;   //设置类型
                    this.data.classification = '1'; //设置为顶级菜单
                }

                if(this.data.type > 3){
                    this.$message.error("API权限为最下级,不能向下添加");
                    return false;
                }

                this.$refs['form'].validate(valid=>{
                    if(valid){
                        this.fullscreenLoading = true;
                        saveOrUpdate(this.data).then(res=>{
                            this.fullscreenLoading = false;
                            this.value = false;
                            this.$parent.getPermissionList(this.$parent.params);
                        });
                    }else{
                        return false;
                    }
                });

            }
        },
        watch:{
            value(data){
                if(data){
                    this.getPermissionList();
                }
            },
            'data.id'(data){
                if(data){
                    this.tree.expandedKeys = [];
                    this.tree.currentNodeKey = '';
                    this.tree.expandedKeys.push(this.data.id);
                    setTimeout(()=>{
                        this.$refs['tree'].setCurrentKey(this.data.id);
                    },500)
                }
            }
        },
        computed:{
            rules(){
                return {
                    name:this.nameRule,
                    code:this.codeRule
                }
            }
        },
        props:{
            nameRule:{
                type:Array,
                default:()=>{
                    return [
                        {required:true,message:'必填',trigger:'blur'}
                    ]
                }
            },
            codeRule:{
                type:Array,
                default:()=> {
                    return [
                        {required:true,message:'必填',trigger:'blur'}
                    ]
                }
            }
        }
    }
</script>

<style scoped>

</style>